<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
    <div class="w-full bg-[#ffffff] h-[135px] continer leading-[42px]">
        <header class="h-[42px] bg-[#477577]">
            <span class="text-[#cebab2]">Active Your Kit</span>
            <span class="text-[#ffffff]">About</span>
            <span class="text-[#ffffff]">Contact</span>
            <span class="text-[#ffffff]">Support</span>
        </header>
        <div class="content flex mt-5 justify-between px-8 items-center">
            <img class="log" :src="log" alt="">
            <div class="right-box">
                <el-icon :size="36"><GoodsFilled /></el-icon>
                <img class="equal" :src="equal" alt="">
            </div>
        </div>
    </div>
  </template>
<script lang="ts" setup>
  import { ref } from "vue";
  import { Check } from "@element-plus/icons-vue";
  import log from '@/assets/img/red-uti-logo.png'
  import equal from '@/assets/img/equal.png'
  

  </script>

<style scoped lang="less">
.log {
    width: 152px;
    height: 50px;
}
.equal {
    width: 40px;
    height: 30px;
}
header {
    display: flex;
    gap: 15px;
    justify-content: center;
}
.right-box {
    display: flex;
    align-items: center;
    gap: 30px;

}
.continer {
    font-family: Bicyclette;
}
</style>
    